import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {List, message} from "antd";
import {
  listInterfaceInfoByPageUsingGet
} from "@/services/xingxiang_backed/interfaceInfoController";

const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>(0);
  const  loadData = async (current = 1 , pageSize =5 ) =>{
    setLoading(true);
    try {
      const res  = await listInterfaceInfoByPageUsingGet({
        current ,
        pageSize
      })
      setList(res?.data?.records ?? []);
      setTotal(res?.data?.total ?? 0);
    } catch (error: any){
        message.error('请求失败'+ error.message);
      }
      setLoading(false);
  }

  useEffect(() =>{
    loadData();
  },[])

  return (
    <PageContainer>
      <List
        className="my-list"
        loading={loading}
        itemLayout="horizontal"
        dataSource={list}
        renderItem={(item) => (
          <List.Item actions={[<a key={item.id} href={`/interface_info/${item.id}`}>查看</a>]}>
            <List.Item.Meta
              title={<a href="https://ant.design">{item.name}</a>}
              description={item.description}
            />
          </List.Item>
        )}
        pagination={{
          pageSize: 5,
          total,
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          showTotal(total :number) {
            return "总数:"+total;
          },
          onChange(page, pageSize) {
            loadData(page, pageSize);
          },
        }}
      />
    </PageContainer>
  );
};

export default Index;
